<?php
use lvzmen\yii\cms\widgets\markdown\Markdown;
use lvzmen\yii\cms\widgets\markdown\Example;
use yii\bootstrap\Button;

$html = [
    "markdown0" => <<<M0
## 按钮组
通过按钮组容器可以把一组按钮放在同一行里，示例如下：
M0,
    "example0" => [
        "html" => \yii\bootstrap\ButtonGroup::widget([
            "buttons" => [
                [
                    "label" => "Left",
                    "options" => ["class" => "btn btn-primary"]
                ],
                [
                    "label" => "Middle",
                    "options" => ["class" => "btn btn-success"]
                ],
                [
                    "label" => "Right",
                    "options" => ["class" => "btn btn-warning"]
                ],
            ]
        ])
        ,
        "yii" => <<<EY0
echo \yii\bootstrap\ButtonGroup::widget([
    "buttons" => [
        [
            "label" => "Left",
            "options" => [
                "class" => "btn btn-primary"
            ]
        ],
        [
            "label" => "Middle",
            "options" => [
                "class" => "btn btn-success"
            ]
        ],
        [
            "label" => "Right",
            "options" => [
                "class" => "btn btn-warning"
            ]
        ],
    ]
]);
EY0,
        "bootstrap" => <<<EB0
<div class="btn-group">
    <button class="btn btn-primary">Left</button>
    <button class="btn btn-success">Middle</button>
    <button class="btn btn-warning">Right</button>
</div>
EB0
    ],
    "markdown1" => <<<M0
## 按钮组尺寸
可以通过`.btn-group`加上`.btn-group-lg`，`.btn-group-sm`，`.btn-group-xs`类控制按钮组的大小，示例如下：
M0,
    "example1" => [
        "html" =>
            \yii\bootstrap\ButtonGroup::widget([
                "options" => ["class" => "btn-group-lg"],
                "buttons" => [
                    [
                        "label" => "Left",
                        "options" => ["class" => "btn btn-primary"]
                    ],
                    [
                        "label" => "Middle",
                        "options" => ["class" => "btn btn-success"]
                    ],
                    [
                        "label" => "Right",
                        "options" => ["class" => "btn btn-warning"]
                    ],
                ]
            ])
        ,
        "yii" => <<<EY1
echo \yii\bootstrap\ButtonGroup::widget([
    "options" => ["class" => "btn-group-lg"],
    "buttons" => [
        [
            "label" => "Left",
            "options" => [
                "class" => "btn btn-primary"
            ]
        ],
        [
            "label" => "Middle",
            "options" => [
                "class" => "btn btn-success"
            ]
        ],
        [
            "label" => "Right",
            "options" => [
                "class" => "btn btn-warning"
            ]
        ],
    ]
]);
EY1,
        "bootstrap" => <<<EB1
<div class="btn-group-lg btn-group">
    <button class="btn btn-primary">
        Left
    </button>
    <button class="btn btn-success">
        Middle
    </button>
    <button class="btn btn-warning">
        Right
    </button>
</div>
EB1

    ],
    "markdown2" => <<<EM2
## 垂直排列
可以用`.btn-group-vertical`类实现垂直排列，如下：
EM2
    ,
    "example2" => [
        "html" =>
            \yii\bootstrap\ButtonGroup::widget([
                "options" => ["class" => "btn-group-vertical"],
                "buttons" => [
                    [
                        "label" => "Top",
                        "options" => ["class" => "btn btn-primary"]
                    ],
                    [
                        "label" => "Middle",
                        "options" => ["class" => "btn btn-success"]
                    ],
                    [
                        "label" => "Bottom",
                        "options" => ["class" => "btn btn-warning"]
                    ],
                ]
            ])
        ,
        "yii" => <<<EY2
echo \yii\bootstrap\ButtonGroup::widget([
    "options" => [
        "class" => "btn-group-vertical"
    ],
    "buttons" => [
        [
            "label" => "Top",
            "options" => [
                "class" => "btn btn-primary"
            ]
        ],
        [
            "label" => "Middle",
            "options" => [
                "class" => "btn btn-success"
            ]
        ],
        [
            "label" => "Bottom",
            "options" => [
                "class" => "btn btn-warning"
            ]
        ],
    ]
]);
EY2
        ,
        "bootstrap" => <<<EB2
<div class="btn-group-vertical btn-group">
    <button class="btn btn-primary">
        Top
    </button>
    
    <button class="btn btn-success">
        Middle
    </button>
    
    <button class="btn btn-warning">
        Bottom
    </button>
</div>
EB2
    ],
    "markdown3" => <<<M3
## Widget Api
### 父类及继承关系
![button group](/upload/articles/images/20210909140459.png)
### 属性
- `buttons`: array  
这个属性需要赋予一个数组，数组中每个元素都是一个`button`，比如说：
```php
echo ButtonGroup::widget([
    'buttons' => [
        ['label' => 'A', 'options' => ['class' => 'btn btn-success']],
        ['label' => 'B'],
        ['label' => 'C', 'visible' => false],
    ]
]);
```
上述示例代码，用`label`，`options`和`visible`来描述一个`button`，但也可以直接赋予`widget`小部件，如下：
```php
echo ButtonGroup::widget([
    'buttons' => [
        Button::widget(['label' => 'A']),
        ['label' => 'B'],
    ]
]);
```
- `encodeLabels`: true/false
如果label中出现html标签，此字段用于控制是否对其进行转换，比如说：
M3
    ,
    "example3" => [
        "html" =>
            Button::widget(["label" => "<div style='color:blue'>Encode Label</div>", "encodeLabel" => true, "options" => ["class" => "btn btn-success", "style" => "margin-right:10px"]]) .
            Button::widget(["label" => "<div style='color:blue'>Not Encode Label</div>", "encodeLabel" => false, "options" => ["class" => "btn btn-success"]])
        ,
        "yii" => <<<EY2
use \yii\bootstrap\Button;
echo Button::widget([
    "label" => "Encode Label", 
    "encodeLabel" => true, 
    "options" => [
        "class" => "btn btn-success"
   ]
]);
echo Button::widget([
    "label" => "Not Encode Label", 
    "encodeLabel" => false, 
    "options" => [
        "class" => "btn btn-success"
    ]
]);
EY2
        ,
        "bootstrap" => <<<EB2
<!-- encodeLabel = true -->
<button class="btn btn-success">
    &lt;div style='color:blue'&gt;Encode Label&lt;/div&gt;
</button>

<!-- encodeLabel = false -->
<button class="btn btn-success">
    <div style="color:blue">Not Encode Label</div>
</button>
EB2
    ]



];

foreach($html as $name => $item){
    switch ($name) {
        case strpos($name, "example") !== false:
            echo Example::widget($item);
            break;
        case strpos($name, "markdown") !== false:
            echo Markdown::widget(["content" => $item]);
            break;
        default:
            break;
    }
}